<template>
    <div>
        <el-dialog top="5vh" :title="title" :visible.sync="visible" :width="width + 'px'" :before-close="onClose"
            :close-on-click-modal="false">
            <div class="container" :style="{height: height + 'px'}">
                <slot name="content"></slot>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>        
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: "标题"
        },
        visible: {
            type: Boolean,
            default: false
        },
        width: {
            type: Number,
            default: 600
        },
        height: {
            type: Number,
            default: 250
        },        
    },
    data() {
        return {

       }
    },
    methods: {
        onClose() {
            this.$emit("onClose")
        },
        onConfirm() {
            this.$emit("onConfirm")
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    overflow-x: initial;
    overflow-y: auto;
}

.el-dialog__wrapper{
    ::v-deep .el-dialog {
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
        .el-dialog__header {
            border-top-left-radius: 7px !important;
            border-top-right-radius: 7px !important;
            background-color: #1890ff;
            .el-dialog__title {
                color: #fff;
                font-size: 15px;
                font-weight: 700;
            }
            .el-dialog__close {
                color: #fff;
            }
        }
        .el-dialog__body {
            padding: 10px 10px !important;
        }
        .el-dialog__footer {
            border-top: 1px solid #e8eaec !important;
            padding: 10px !important;
        }
    }
}
</style>